<template>
	<div>
		<ul class="container">
			<li>
				<div>
					<span class="time">2018-12-21 08:00</span>
					<span>兑换积分
						<span class="integral-count">1999</span>
					</span>
				</div>
				<div class="status-load">审核中</div>
			</li>
			
			<li>
				<div>
					<span class="time">2018-12-21 08:00</span>
					<span>兑换积分
						<span class="integral-count">1999</span>
					</span>
				</div>
				<div class="status-success">已兑换</div>
			</li>
			
			<li>
				<div>
					<span class="time">2018-12-21 08:00</span>
					<span>兑换积分
						<span class="integral-count">1999</span>
					</span>
				</div>
				<div class="status-error">未通过</div>
			</li>
		</ul>
		<p class="no-more">没有更多了哦~</p>
	</div>
</template>

<script>
	export default {

	}
</script>

<style scoped="scoped" lang="less">
	.container {
		li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: .3rem;
			background: #fff;
			border-bottom: .01rem solid #F6F6F6;

			div:first-child {
				flex-direction: column;
				display: flex;

				.time {
					font-size: 12px;
					color: #828282;
					margin-bottom: .16rem;
				}
			}

			.integral-count {
				font-size: 18px;
				color: #F5A623;
				margin-left: .2rem;
			}

			.status-load {
				border: 1px solid #69B309;
				border-radius: .1rem;
				color: #69B309;
				padding: .1rem;
			}

			.status-success {
				background: #C1C1C1;
				border: 1px solid #C1C1C1;
				color: #fff;
				border-radius: .1rem;
				padding: .1rem;
			}

			.status-error {
				background: #D0021B;
				border: 1px solid #D0021B;
				border-radius: .1rem;
				padding: .1rem;
				color: #fff;
			}
		}
	}

	.no-more {
		padding: .3rem;
		text-align: center;
		color: #9B9B9B;
	}
</style>
